<template>
  <transition>
  <div class="app-coupon-list">
    <section class="app-main">
      <ul class="module-list"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
        <li class="item" v-for="item in couponList">
          <div class="item-header"><span v-text="item.productName"></span><span class="item-state">已核销</span></div>
          <dl class="item-body">
            <dd><span class="addon">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span><span v-text="item.cardCode"></span></dd>
            <dd><span class="addon">核销时间：</span><span v-text="item.consumeTime"></span></dd>
            <dd><span class="addon">顾客昵称：</span><span v-text="item.wxName"></span></dd>
          </dl>
        </li>
      </ul>
      <div class="line-scale-pulse-out" v-show="loading">
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
      </div>
      <div class="module-none" v-if="showNone">
         点击扫一扫核销！
      </div>
      <div class="load-finish-tips" v-if="loadTips">
        已加载完成
      </div>
      <section class="app-footer navbar-fixed-bottom">
        <ul class="row">
          <li class="item"><span @click="handleSweep" class="btn-action">扫一扫核销</span></li>
          <li class="item">
            <router-link to="/card-number-cancle" class="btn-action">卡券号核销</router-link>
          </li>
        </ul>
      </section>
    </section>
    <!--搜索到卡券出来的内容-->
    <div class="modal-ping" v-if="showCard">
    <div class="search-result">
      <div class="module-card">
        <div class="item-header" v-text="cardInfo.name"></div>
        <dl class="item-body">
          <dd><span class="addon">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span><span v-text="cardInfo.code"></span></dd>
          <dd><span class="addon">有效期限：</span>{{cardInfo.beginTime}}～{{cardInfo.endTime}}</dd>
        </dl>
      </div>
      <div class="button-content">
        <button class="btn btn-default" type="button" @click="handleCloseModal">取消</button>
        <button class="btn btn-danger" type="button" @click="handleCancle">确认核销</button>
      </div>
    </div>
    </div>
    <!--搜索到卡券出来的内容-->
  </div>
    </transition>
</template>

<script>
  import { Header,Cell,InfiniteScroll,MessageBox,Toast} from 'mint-ui';
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      url:'',
      couponList:{},
      wxConfig:[],
      showNone:false,
      loading:false,
      page:1,
      total:0,
      loadTips:false,
      showCard:false,
      cardInfo:{
        name:'',
        code:'',
        beginTime:'',
        endTime:'',
      },
    }
  },
  mounted(){
    // 初始化核销列表
    this.getData();
    //  调取核销接口
    this.url=location.href;
    var params = new URLSearchParams();
    params.append('url',this.url);
    this.$axios({
      method: 'post',
      url:'gp/cardCancel/getCardCancel',
      data:params
    }).then((res)=> {
      this.wxConfig=res.data;
    console.log(this.wxConfig)
    this.$wx.config({
      beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'ww523544f7e1e50c46', // 必填，企业微信的corpID
      timestamp:this.wxConfig.timestamp, // 必填，生成签名的时间戳
      nonceStr: this.wxConfig.nonceStr, // 必填，生成签名的随机串
      signature: this.wxConfig.signature,// 必填，签名，见附录1
      jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
  });
  },
  methods:{
    getData(){
      var params = new URLSearchParams();
      params.append('currentPage', this.page);
      this.$axios({
        method: 'post',
        url:'gp/card/get',
        data:params
      }).then((res)=> {
      this.couponList=res.data.object.rows;
      this.total=res.data.object.total;
      if(this.couponList.length<=0){
        this.showNone=true;
      }else{
        this.showNone=false;
      }
    });
    },
    loadMore() {
      if(this.total==0){
        return false;
      }

//      console.log(this.couponList.length,this.total)
      if(this.couponList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('currentPage', this.page);
        this.$axios({
          method: 'post',
          url:'gp/card/get',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.object.rows.length;i++){
          this.couponList.push(res.data.object.rows[i]);
        }
      });
        setTimeout(() => {
          this.loading = false;
      },1500);
      }else{
        this.loadTips=true;
      }

    },
    handleSweep(){

      this.$wx.ready(()=>{
          this.$wx.scanQRCode({
              desc: 'scanQRCode desc',
              needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: (res)=> {
              this.cardInfo.code=res.resultStr;
              var params = new URLSearchParams();
              params.append('code',this.cardInfo.code)
              this.$axios({
                method: 'post',
                url:'gp/cardCancel/getCard',
                data:params
              }).then((res)=>{
                if(res.data.statusCode==200){
                this.cardInfo.name=res.data.object.cardName;
                this.cardInfo.code=res.data.object.code;
                this.cardInfo.beginTime=res.data.object.begin_time;
                this.cardInfo.endTime=res.data.object.end_time;
                this.showCard=true;
              }else{
                Toast({
                  message: res.data.message,
                  position: 'middle',
                  duration:1000
                });
                return false;
              }
            });
            },
              error: function(res) {
                if (res.errMsg.indexOf('function_not_exist') > 0) {
                  alert('版本过低请升级')
                }
              }
           });
        })
    },
    handleCloseModal(){
      this.showCard=false;
    },

    handleCancle(){
      var params = new URLSearchParams();
      params.append('code', this.cardInfo.code);
      this.$axios({
        method: 'post',
        url:'gp/cardCancel/consumeCard',
        data:params
      }).then((res)=>{
        this.showCard=false;
        if(res.data.statusCode==200){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration:1500
        });
        // 更新核销列表
          this.getData();
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration:1000
        });
        return false;
      }
    });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

.modal-ping{
  background:rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
  .app-coupon-list .search-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 80%;
  }
  .app-coupon-list .module-card{
    background: #fff;
    padding:14px 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px 4px 0 0 ; }
  .app-coupon-list .module-card .item-header {
    padding: 0 0 12px;
    font-size:16px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #eee; }
  .app-coupon-list .module-card .item-body {
    margin: 0;
    padding:10px 0 0;
    font-size:15px;
    color: #888; }
  .app-coupon-list .module-card .item-body dd {
    margin: 0;
    line-height:24px; }
.app-coupon-list .button-content{
  font-size: 0;
}
.app-coupon-list .button-content .btn {
  background: #007EE5;
  border-top:1px solid #007EE5;
  display: inline-block;
  vertical-align: top;
  width:50%;
  outline: none;
  padding:12px 0;
  border: none;
  color:#fff;
  font-size:16px;
  border-radius:0 0 4px 0;
  font-family: "Microsoft YaHei"; }
.app-coupon-list .button-content .btn-default{
  background: #fff;
  color:#333;
  border-radius:0 0 0 4px;
  border-top:1px solid #eee;
}
  .mint-msgbox-btns{
    height:45px !important;
  }
  .app-coupon-list .app-main{
    padding:16px 0 46px;
  }
  .app-coupon-list .module-list {
    padding:0 16px;
  }
  .app-coupon-list .module-list .item {
    background: #fff;
    padding:12px 16px;
    margin: 0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px; }
  .app-coupon-list .module-list .item-header {
    padding: 0 0 10px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #eee; }
  .app-coupon-list .module-list .item-body {
    margin: 0;
    padding:10px 0 0;
    font-size:14px;
    color: #888; }
  .app-coupon-list .module-list .item-state{
    float: right;
  }
  .app-coupon-list .module-list .item-body dd {
    margin: 0;
    line-height:22px; }

  .module-none{
    padding:36px 0 0;
    font-size: 20px;
    text-align: center;
    color:#999;
  }
  .app-coupon-list .app-footer {
    background: #007EE5;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 768px;
    margin: 0 auto;
    font-size: 0;
    border-top: 1px solid #eee; }
  .app-coupon-list .app-footer .item {
    display:inline-block;
    width:50%;
    font-size:16px;
    color: #fff;
    text-align: center;
    border-right: 1px solid #eee;

  }
  .app-coupon-list .app-footer .item:last-child {
    border-left: none; }
  .app-coupon-list .app-footer .btn-action{
    display: block;
    padding:12px 0;
    color: #fff;
  }

  .load-finish-tips{
    padding:4px 0 16px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
</style>
